<template>
  <div class="page-prize">
    <div class="btns">
      <span class="btn-radius bg-blue text-white inline-block" @click="showRule">游戏规则</span>
      <router-link to="result" class="btn-radius bg-blue text-white inline-block">返回</router-link>
    </div>
    <div class="tabs flex-horizon">
      <div @click="tabClick(0)" class="tab flex-item" :class="{'on':channel==0}">抽取道具</div>
      <div @click="tabClick(1)" class="tab flex-item" :class="{'on':channel==1}">兑换奖品</div>
    </div>

    <div class="sudoku-module" v-show="channel == 0">
      <div class="text-center">
        <span>剩余积分: {{score}}</span>
        <span>剩余次数: {{Math.floor(score/10)}}</span>
      </div>
      <div class="sudoku">
        <div class="piece" :class="{'on':sudokuIndex==1}" index="1">
          <img src="../assets/images/7.jpg" alt="">
        </div>
        <div class="piece" :class="{'on':sudokuIndex==2}" index="2">
          <img src="../assets/images/22.jpg" alt="">
        </div>
        <div class="piece" :class="{'on':sudokuIndex==3}" index="3">
          <img src="../assets/images/8.jpg" alt="">
        </div>
        <div class="piece" :class="{'on':sudokuIndex==8}" index="8">
          <img src="../assets/images/88.jpg" alt="">
        </div>
        <div class="piece sudoku-start-btn" @click="startSudoku">
          <img src="../assets/images/action-btn.png" alt="">
        </div>
        <div class="piece" :class="{'on':sudokuIndex==4}" index="4">
          <img src="../assets/images/44.jpg" alt="">
        </div>
        <div class="piece" :class="{'on':sudokuIndex==7}" index="7">
          <img src="../assets/images/8.jpg" alt="">
        </div>
        <div class="piece" :class="{'on':sudokuIndex==6}" index="6">
          <img src="../assets/images/66.jpg" alt="">
        </div>
        <div class="piece" :class="{'on':sudokuIndex==5}" index="5">
          <img src="../assets/images/7.jpg" alt="">
        </div>
      </div>
    </div>
    <div class="goods" v-show="channel == 1">
      <div class="text-center">
        <span>剩余积分: {{score}}　</span>
        <router-link to="record" class="text-blue">查看兑换记录</router-link>
      </div>
      <div class="goods-list flex-horizon">
        <div class="goods-item" v-for="(item,index) in goods" @click="clickGoods(index)">
          <img :src="item.imgsrc" alt="">
          <div class="goods-title">【{{item.score}}积分】{{item.name}}</div>
        </div>
      </div>
    </div>

    <uiDialog :data="sudokuDialogData"></uiDialog>
    <uiDialog :data="confirmDialogData">您确定要兑换此商品吗?</uiDialog>
  </div>
</template>

<script type="text/ecmascript-6">
  //import sudoku from '../assets/script/sudoku'
  import axios from 'axios'
  import uiDialog from '../components/dialog.vue'

  let sudoku = {
    total: 32,
    speed: 100,
    running: 0,
    reset:function () {
      this.total = 32
      this.speed = 100
      this.running = 0
    }
  }


  // 第二次抽奖报错500
  // 抽奖没有减少分数
  export default {
    name: 'prize',
    data: function () {
      return {
        channel: 0,
        sudokuIndex:1,
        sudokuDialogData:{
          title:'提示',
          visible:0,
          text: '',
          btns:['确定']
        },
        confirmDialogData:{
          title: '提示',
          visible: 0,
          goodsIndex: 0,
          btns: ['确定','取消'],
          callback: (res,data)=>{
            if(res==0){
              axios.get('/gxtest/cashGoods',{params:{goodsid:this.goods[data.goodsIndex].id}}).then(res=>{
                alert(res.data)
                let str = ['恭喜您兑换成功','兑换失败,商品不存在','兑换失败,您的积分不足','兑换失败,商品数量不足']
                this.$store.commit('updateAlertData',{visible:1,text:str[res.data]})
                this.$store.commit('decreaseScore',this.goods[data.goodsIndex].score)
              })
            }
            data.visible = 0
          }
        },
        sudokuResult: 0,
        goods: []
      }
    },
    computed: {
      score(){
        return this.$store.state.userinfo.score
      },
      testid(){
        return this.$store.state.test.id
      }
    },
    mounted(){
      axios.get('/gxtest/getGoods',{params:{testid:this.testid}}).then(res=>{
        this.goods = res.data
      })
    },
    methods: {
      tabClick(tabIndex){
        this.channel = tabIndex
      },
      showRule(){
        this.$store.commit('showRule')
      },
      sudokuOver(){
        let strArr = [
          '很遗憾您没有中奖',
          '恭喜您获得 去错卡 一张!',
          '恭喜您获得 加时卡 一张!',
          '恭喜您获得 跳过一题卡 一张!',
          '恭喜您获得 双倍积分卡 一张!'
        ]
        this.sudokuDialogData.text = strArr[this.sudokuResult]
        this.sudokuDialogData.visible = 1
        sudoku.reset()
      },
      sudokuLoop(){
        sudoku.total--
        if(sudoku.total<=0){
          this.sudokuOver()
          return
        }
        if(sudoku.total<=9){
          sudoku.speed+=30
        }
        this.sudokuIndex++
        if(this.sudokuIndex>8){
          this.sudokuIndex=1
        }
        setTimeout(res=>{
          this.sudokuLoop()
        },sudoku.speed)
      },
      startSudoku(){
        if(sudoku.running){
          return
        }
        if(this.score<10){
          this.$store.commit('updateAlertData',{text:'您的抽奖次数已用完',visible:1})
          return
        }
        axios.get('/gxtest/startRandTrophy').then(res=>{
          if(res.data==-1){
            this.$store.commit('updateAlertData',{text:'您的抽奖次数已用完',visible:1})
            return
          }
          this.sudokuIndex = 1
          this.sudokuResult = res.data
          if(res.data>0){
            sudoku.total+=res.data*2
          }else{
            sudoku.total+= (Math.floor(Math.random()*4)*2+1)
            console.log(sudoku.total)
          }
          sudoku.running = 1
          this.sudokuLoop()
          this.$store.commit('updateUserInfo',{score:this.$store.state.userinfo.score-10})
        })
      },
      clickGoods(index){
        this.confirmDialogData.goodsIndex = index
        this.confirmDialogData.visible = 1
      }
    },
    components: {
      uiDialog
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .page-prize
    width 100vw
    height 100vh
    padding 10px
    overflow-y scroll
    background: url("../assets/images/bg-image.jpg") no-repeat center center
    background-size 100% auto
    .btns
      text-align right
    .tabs
      text-align center
      width 60vw
      border-radius 3px
      background-color #fff
      border 1px solid #1877cf
      margin 10px auto
      .tab
        padding 4px 8px
      .on
        color #fff
        background-color #1877cf
    .sudoku
      display flex
      flex-wrap wrap
      justify-content center
      margin 10px 0
      .piece
        width 30vw
        height 30vw
        background #ffffff
        border 1px solid #ddd
      .on
        border 1px solid red
    .goods-list
      align-items flex-start
      flex-wrap wrap
    .goods-item
      flex 0 0 48%
      margin 10px 0
    .goods-title
      margin-top 2px
</style>
